<template>
  <view class="elder-list-page" :style="{ '--safe-area-bottom': safeAreaBottom + 'px' }">
    <!-- 列表标题 -->
    <view class="list-header">
      <text class="header-title">长者信息列表</text>
    </view>

    <!-- 长者信息卡片列表 -->
    <!-- <scroll-view class="list-container" scroll-y> -->
      <!-- 循环渲染每个长者卡片 -->
      <view 
        class="elder-card" 
        v-for="(elder, index) in elderList" 
        :key="index"
      >
        <!-- 卡片内容（同前） -->
        <view class="card-header">
          <text class="card-title">长者信息 #{{ index + 1 }}</text>
        </view>
        <view class="card-content">
          <!-- 信息行（同前） -->
          <view class="info-row">
            <text class="info-label">姓名：</text>
            <text class="info-value">{{ elder.name }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">身份证号：</text>
            <text class="info-value">{{ elder.idCard }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">生日：</text>
            <text class="info-value">{{ elder.birthday }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">性别：</text>
            <text class="info-value">{{ elder.gender }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">与老人关系：</text>
            <text class="info-value">{{ elder.relation }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">手机号：</text>
            <text class="info-value">{{ elder.phone }}</text>
          </view>
        </view>
      </view>
    <!-- </scroll-view> -->

    <!-- 底部独立按钮（关键新增部分） -->
  <view class="bottom-btn-container" :style="{ paddingBottom: safeAreaBottom + 'px' }">
      <wd-button block @click="handleAddElder">+ 新增绑定长者</wd-button>
    </view>
  </view>
</template>

<script setup>

import { ref,onMounted } from 'vue';
	import {
		useRouter
	} from 'uni-mini-router'
const router = useRouter();

// 底部安全区域高度（初始值设为0）
const safeAreaBottom = ref(0);

// 页面加载时获取设备安全区域信息
onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      // 获取底部安全区域高度（iOS 11+ 支持）
      safeAreaBottom.value = res.safeAreaInsets?.bottom || 0;
    }
  });
});

// Mock 长者列表数据
const elderList = ref([
  {
    name: '王桂兰',
    idCard: '11010519580315452X',
    birthday: '1958-03-15',
    gender: '女',
    relation: '配偶',
    phone: '13812345678'
  },
  {
    name: '张建军',
    idCard: '110102196005203456',
    birthday: '1960-05-20',
    gender: '男',
    relation: '子女',
    phone: '13987654321'
  },
  {
    name: '李淑芳',
    idCard: '310101194812124321',
    birthday: '1948-12-12',
    gender: '女',
    relation: '护工',
    phone: '18600001111'
  }
]);

// 底部按钮点击事件（新增绑定逻辑）
const handleAddElder = () => {
  uni.showToast({ title: '即将跳转新增绑定页面', icon: 'none' });
  // 实际开发中跳转至新增页面（示例路径）：
  // uni.navigateTo({ url: '/pages/elder/add-bind' });
  router.push({
	  name:"family_elderInsert",
	  params:{
		  id:""
	  }
  })
};
</script>

<style lang="scss" scoped>
.elder-list-page {
  min-height: 100vh;
  background: #f0f2f5; // 页面背景色
  padding: 0 32rpx;
  padding-bottom: 200rpx; /* 为底部按钮预留空间（根据按钮高度调整） */

  // 列表标题
  .list-header {
    padding: 40rpx 0 30rpx;
    
    .header-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #1a1a1a; // 深灰色标题
    }
  }

  // 列表容器（卡片列表）
  // .list-container {
  //   height: calc(100vh - 100rpx - 40rpx); // 总高度 = 视口高度 - 标题高度 - 底部按钮预留空间
  //   padding: 0 16rpx; // 卡片左右留白
  // }

  // 单个长者卡片（同前）
  .elder-card {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    margin-bottom: 24rpx;
    overflow: hidden;

    &:last-child {
      margin-bottom: 0;
    }
  }

  // 卡片头部
  .card-header {
    padding: 24rpx 30rpx 16rpx;
    
    .card-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #1890ff; // 蓝色标题
    }
  }

  // 卡片内容
  .card-content {
    padding: 0 30rpx 30rpx;
  }

  // 信息行（同前）
  .info-row {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      width: 200rpx;
      font-size: 30rpx;
      color: #666666;
      font-weight: 500;
    }

    .info-value {
      flex: 1;
      font-size: 30rpx;
      color: #333333;
      word-break: break-all;
    }
  }

  // 底部按钮容器（关键修复）
    .bottom-btn-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 24rpx 32rpx;
      background: #ffffff;
      box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.05);
      // 使用 CSS 变量替代 JS 模板字符串
      padding-bottom: calc(24rpx + var(--safe-area-bottom)); 
    }

  // 底部按钮（核心样式）
  .bottom-btn {
    width: 100%; // 宽度占满屏幕
    height: 88rpx; // 按钮高度（约44px，符合移动端习惯）
    line-height: 88rpx; // 文字垂直居中
    background: #1890ff; // 主题蓝色（与卡片标题色一致）
    color: #ffffff; // 白色文字
    font-size: 32rpx; // 字体大小
    font-weight: 500; // 字重
    border-radius: 12rpx; // 圆角（与卡片圆角呼应）
    border: none; // 无边框
    transition: all 0.2s; // 过渡动画

    &:active {
      background: #1084e6; // 点击时颜色加深（主题色变深）
      opacity: 0.9; // 轻微透明反馈
    }
  }
}
</style>